<template>
  <div class="verification-confirm">
    <Back-Arrow></Back-Arrow>
    <div class="phone-img">
      <img src="../../../static/images/login/lock.png"
           alt="">
    </div>
    <div class="phone-form">
      <div class="phone-num">
        <i>
          <img src="../../../static/images/login/smallLock.png"
               alt="">
        </i>
        <input type="password"
               placeholder="请输入密码"
               v-model="password">
      </div>
      <div class="auth-code">
        <i>
          <img src="../../../static/images/login/smallLock.png"
               alt="">
        </i>
        <input type="password"
               placeholder="请确认密码"
               v-model="affirm">
      </div>
      <p class="input-tip">* 密码长度为8至16位(不能为纯数字)</p>
    </div>
    <My-Button :text="'完成注册'"
               @click.native="onDoneReg"></My-Button>
    <Err-Hint v-if="hint"
              :errInfo="errInfo"></Err-Hint>
  </div>
</template>

<script>
import MyButton from '@/commonCom/Button-but'
import BackArrow from '@/commonCom/backBtn'
import ErrHint from '@/commonCom/errHint'
export default {
  name: 'numberVer',
  components: {
    MyButton,
    BackArrow,
    ErrHint
  },
  data () {
    return {
      affirm: '',
      password: '',
      hint: false,
      errInfo: {}
    }
  },
  mounted () {
  },
  methods: {
    onDoneReg () {
      let formData = new FormData()
      formData.append('phoneNum', this.$route.query.phone)
      formData.append('password', this.password)
      let regPass = /^(?![0-9]+$)(?![^a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
      if (!regPass.test(this.affirm) && !regPass.test(this.password)) {
        this.errInfo = {
          text: '8至16位至少一个字母'
        }
        // this.$router.push('/Register/regSuccess')
        this.hint = true
        setTimeout(() => {
          this.hint = false
        }, 1000)
      } else if (this.affirm !== this.password) {
        this.errInfo = {
          text: '两次密码输入不一致'
        }
        // this.$router.push('/Register/regSuccess')
        this.hint = true
        setTimeout(() => {
          this.hint = false
        }, 1000)
      } else {
        this.$http.post(`${this.baseUrl.register}`, formData).then((res) => {
          if (res.data.code === 500) {
            this.$router.push({ path: '/Register/regSuccess',
              query: {
                errInfo: res.data.msg,
                url: '../../../static/images/login/X.png'
              } })
          } else {
            this.$router.push({ path: '/Register/regSuccess',
              query: {
                errInfo: '注册成功!',
                url: '../../../static/images/login/successIcon.png'
              } })
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.verification-confirm {
  .phone-img {
    text-align: center;
    padding: 0.9rem 0 0.7rem;

    img {
      width: 2.8rem;
    }
  }

  .phone-form {
    text-align: center;

    i {
      position: absolute;
      top: 0.24rem;
      padding-left: 0.2rem;

      img {
        width: 0.32rem;
      }
    }
    .input-tip{
      color: #d21733;
    }
    input {
      height: 0.8rem;
      width: 6rem;
      margin-bottom: 0.4rem;
      border-radius: 6px;
      background-color: rgb(246, 245, 245);
      color: rgb(153, 153, 153);
      text-indent: 0.8rem;
    }

    .phone-num {
      position: relative;
    }

    .auth-code {
      position: relative;
    }
  }
}
</style>
